<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>新增音乐</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.5.7/css/layui.css" media="all">
    <link rel="stylesheet" href="../lib/layui-v2.5.7/css/modules/layer/default/layer.css" media="all">
    <style>
        [v-cloak] {
            display: none !important;
        }

        #paste-from-word {
            width: 100%;
            height: 400px;
        }

        .cover_image {
            width: 150px;
            height: 150px;
        }
    </style>
</head>
<body>
<div id="main-content">
    <div style="padding: 20px; background-color: #F2F2F2;">
        <div class="layui-row layui-col-space15">

            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <form class="layui-form layui-form-pane" action="">
                            <div class="layui-form-item">
                                <label class="layui-form-label">音乐名</label>
                                <div class="layui-input-block">
                                    <input type="text" name="musicName" v-model="musicInfo.musicName" required
                                           lay-verify="required" value="" placeholder="(必填)音乐名" autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <form class="layui-form layui-form-pane" action="">
                            <div class="layui-form-item">
                                <label class="layui-form-label">作者</label>
                                <div class="layui-input-block">
                                    <input type="text" v-model="musicInfo.musicArtist" name="musicArtist" required
                                           lay-verify="required" placeholder="编曲作者" autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="layui-col-md2">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <img v-bind:src="musicInfo.musicCover" class="cover_image"/>
                    </div>
                </div>
            </div>
            <div class="layui-col-md5">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <form class="layui-form layui-form-pane" action="">
                            <div class="layui-form-item">
                                <label class="layui-form-label">专辑图片链接</label>
                                <div class="layui-input-block">
                                    <input v-model="musicInfo.musicCover" type="text" name="musicCover" required
                                           lay-verify="required" placeholder="请输入专辑图片链接" autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="layui-col-md2">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <form class="layui-form layui-form-pane" action="" onsubmit="return false">
                            <div class="layui-form-item">
                                <button type="button" class="layui-btn" id="updatePreviewButton">
                                    <i class="layui-icon"></i>
                                    上传专辑图片
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="layui-col-md3">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <form class="layui-form layui-form-pane" action="">
                            <div class="layui-form-item">
                                <label class="layui-form-label">优先级</label>
                                <div class="layui-input-block">
                                    <div id="prioritySelect"></div>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="layui-col-md8">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <form class="layui-form layui-form-pane" action="">
                            <div class="layui-form-item">
                                <label class="layui-form-label">musicUrl</label>
                                <div class="layui-input-block">
                                    <input type="text" name="musicUrl" v-model="musicInfo.musicUrl" required
                                           lay-verify="required" value=""
                                           placeholder="(必填)音乐播放连接" autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="layui-col-md2">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <form class="layui-form layui-form-pane" action="" onsubmit="return false">
                            <div class="layui-form-item">
                                <button type="button" class="layui-btn" id="updateMusicButton">
                                    <i class="layui-icon"></i>
                                    上传音乐
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>


            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <form class="layui-form layui-form-pane" action="">
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">歌词lrc</label>
                                <div id="main-editor" class="layui-input-block">
                                    <pre id="code" class="ace_editor" style="height:400px">
                                        <textarea class="ace_text-input"></textarea>
                                    </pre>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body" style="text-align: center">
                        <button class="layui-btn" v-on:click=insertMusicInfo()>确认保存</button>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

</body>
<script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="../lib/tinymce/tinymce.min.js" referrerpolicy="origin"></script>
<script src="../lib/tinymce/jquery.tinymce.min.js"></script>
<script src="../lib/layer-v3.5.1/layer/layer.js" charset="utf-8"></script>
<script src="../lib/axios/axios.min.js"></script>
<script src="../lib/vue-module/vue.js"></script>
<script src="../js/main.js"></script>
<script src="../lib/layui-v2.5.7/layui.js" charset="utf-8"></script>
<script src="../lib/xm-select/xm-select.js"></script>
<script src="../js/lay-config.js?v=2.0.0" charset="utf-8"></script>
<script src="../lib/ace/ace.js" type="text/javascript" charset="utf-8"></script>
<script src="../lib/ace/ext-language_tools.js" type="text/javascript" charset="utf-8"></script>
<script>
    const vueObject = new Vue({
        el: "#main-content",
        data: {
            musicInfo: {
                "musicName": "",
                "musicUrl": "",
                "musicCover": "",
                "musicArtist": "",
                "musicLrc": "",
                "priority": ""
            },
            editor: null,
            prioritySelect: null,
        },
        methods: {
            insertMusicInfo: function () {
                if (isEmptyStr(this.musicInfo.musicName)) {
                    layer.msg('音乐名不能为空', {icon: 5, time: 4000});
                    return;
                }
                if (isEmptyStr(this.musicInfo.musicArtist)) {
                    layer.msg('作者不能为空', {icon: 5, time: 4000});
                    return;
                }
                let priorityArr = this.prioritySelect.getValue('value');
                if (priorityArr.length === 0) {
                    layer.alert('优先级未选择', {icon: 2, skin: 'layui-layer-molv', closeBtn: 0, anim: 6});
                    return false;
                }
                this.musicInfo.priority = priorityArr[0];
                if (isEmptyStr(this.musicInfo.musicCover)) {
                    layer.msg('专辑图片不能为空', {icon: 5, time: 4000});
                    return;
                }
                if (isEmptyStr(this.musicInfo.musicUrl)) {
                    layer.msg('音乐播放链接不能为空', {icon: 5, time: 4000});
                    return;
                }
                this.musicInfo.musicLrc = this.editor.getValue();
                axiosPostFunction('/api/blogMusic/authApi/insert', this.musicInfo, true).then((responseData) => {
                    if (responseData) {
                        layer.alert(responseData, {
                            icon: 1,
                            skin: 'layui-layer-molv',
                            closeBtn: 0,
                            anim: 4
                        }, function () {
                            layer.closeAll();
                            parent.layer.closeAll();
                        });
                    }
                }).catch(function (err) {
                    console.warn(err);
                });
            },
        },
        mounted() {
            this.editor = ace.edit("code");
            this.editor.setFontSize(15);
            this.editor.setReadOnly(false);
            this.editor.setOption("wrap", "free")
            this.editor.setShowPrintMargin(false);
            this.editor.setOptions({
                enableBasicAutocompletion: true,
                enableSnippets: true,
                enableLiveAutocompletion: true
            });
            this.editor.setValue('');
            window.onbeforeunload = () => {
                this.editor.destroy();
            };
            this.prioritySelect = xmSelect.render({
                el: '#prioritySelect',
                language: 'zn',
                tips: '请选择优选级',
                empty: '无数据',
                searchTips: '搜索优先级',
                radio: true,
                autoRow: true,
                clickClose: true,
                filterable: true,
                paging: true,
                pageSize: 10,
                pageEmptyShow: false,
                model: {
                    label: {
                        block: {
                            template: function (item, sels) {
                                return '<i class="layui-icon layui-icon-diamond"></i>&nbsp;' + item.name;
                            },
                        },
                    }
                },
                template({item, sels, name, value}) {
                    return name + '<span style="position: absolute; right: 10px; color: #8799a3">' + value + '</span>'
                },
                prop: {
                    name: 'name',
                    value: 'value',
                },
                toolbar: {
                    show: true,
                },
                data: []
            });
            let priorityData = [];
            for (let i = 1; i <= 100; i++) {
                priorityData.push({name: i, value: i});
            }
            priorityData[priorityData.length - 1].selected = true;
            this.prioritySelect.update({
                data: priorityData,
                autoRow: true,
            })
        },
        created() {

        }
    });

    layui.use(['upload', 'form'], function () {
        let $ = layui.$,
            form = layui.form,
            layer = layui.layer,
            upload = layui.upload;
        let token = getToken();

        upload.render({
            elem: '#updatePreviewButton',
            url: apiBaseUrl + '/uploads/upload/authApi/image',
            method: 'POST',
            headers: {
                Authorization: token
            },
            exts: 'jpg|jpeg|gif|png|ico|webp',
            multiple: false,
            auto: true,
            accept: 'file',
            done: function (response, index, upload) {
                console.log(response);
                let respData = response.data;
                let respCode = response.code;
                let message = response.message;
                if (respCode == 200) {
                    layer.msg('上传成功');
                    vueObject.musicInfo.musicCover = respData;
                } else if (respCode == 400) {
                    layer.msg("客户端错误：" + respCode + ":" + message, {icon: 5, time: 4000});
                } else if (respCode == 401 || respCode == 403 || respCode == 500) {
                    layer.msg('msg：' + respCode + ":" + message, {icon: 5, time: 4000});
                } else if (respCode == 402) {
                    layer.msg('认证失败，msg：' + respCode + ":" + message, {icon: 5, time: 4000});
                } else if (respCode == 302) {
                    location.href = "../adminLogin.html";
                } else {
                    console.log(response);
                }
            },
            error: function (index, upload) {
                layer.msg('上传文件失败', {icon: 5, time: 4000});
            }
        });
    });


    layui.use(['upload', 'form'], function () {
        let $ = layui.$,
            form = layui.form,
            layer = layui.layer,
            upload = layui.upload;
        let token = getToken();

        upload.render({
            elem: '#updateMusicButton',
            url: apiBaseUrl + '/uploads/upload/authApi/audio',
            method: 'POST',
            headers: {
                Authorization: token
            },
            exts: 'mp3|m4a|cda|wav|aif|aiff|mid|wma|ra|vqf|ape',
            multiple: false,
            auto: true,
            accept: 'file',
            done: function (response, index, upload) {
                console.log(response);
                let respData = response.data;
                let respCode = response.code;
                let message = response.message;
                if (respCode == 200) {
                    layer.msg('上传成功');
                    vueObject.musicInfo.musicUrl = respData;
                } else if (respCode == 400) {
                    layer.msg("客户端错误：" + respCode + ":" + message, {icon: 5, time: 4000});
                } else if (respCode == 401 || respCode == 403 || respCode == 500) {
                    layer.msg('msg：' + respCode + ":" + message, {icon: 5, time: 4000});
                } else if (respCode == 402) {
                    layer.msg('认证失败，msg：' + respCode + ":" + message, {icon: 5, time: 4000});
                } else if (respCode == 302) {
                    location.href = "../adminLogin.html";
                } else {
                    console.log(response);
                }
            },
            error: function (index, upload) {
                layer.msg('上传文件失败', {icon: 5, time: 4000});
            }
        });
    });

</script>
</body>
</html>
